<template>
  <div>
    <h1>torefs和toref</h1>
    <h1>姓名:{{person.name}}</h1>
    <h2>年龄：{{person.age}}</h2>
    <h1>性别：{{person.sex}}</h1>
    <h2>工资：{{person.job.j1.salary}}</h2>
    <button @click="person.age++">年龄++</button>
    <button @click="person.sex='女'">性别</button>
    <button @click="person.job.j1.salary++">工资+++</button>
    <h1>torefs和toref之后的</h1>
    <h1>姓名:{{name}}</h1>
    <h2>年龄：{{age}}</h2>
    <h1>性别：{{sex}}</h1>
    <h2>工资：{{job.j1.salary}}</h2>
    <h2>工资：{{salary}}</h2>
  </div>
</template>

<script>
import {reactive,toRef, toRefs} from 'vue'
export default {
  setup () {
    let person = reactive({
      name:'张三',
      age:12,
      sex:'男',
      job:{
        j1:{
          salary:10
        }
      }
    })
    // toRef
    let name=toRef(person,'name')
    let age=toRef(person,'age')
    let job=toRef(person,'job')
    let salary=toRef(person.job.j1,'salary')
    // toRefs
    let refsperson=toRefs(person)
    return {
      person,
      name,
      age,
      job,
      salary,
      // 解构
      ...refsperson
    }
  }
}
</script>

<style lang="less" scoped>

</style>